<!-- 登录界面 -->
<template>
    <div class="login-box">
        <!-- 背景盒子 -->
        <div class="bg-box">
            <img class="login-bg-low" src="../../assets/login_bg.png" alt="bogin-bg-low">
        </div>
        <!-- 内容盒子 -->
        <div class="con-box">
            <div class="con-box2">
                <!-- logo -->
                <div class="logo-box left-to-right-0">
                    <img :src="platform == 'ylyb' ? ylLogo : logo" alt="logo"> 
                    <!-- <span class="text">医诊通管理后台</span> -->
                </div>
                <!-- 右上角按钮 -->
                <div class="refresh-btn-box">
                    <el-button icon="el-icon-RefreshRight" circle title="刷新页面" @click="refresh"></el-button>
                </div>
                <el-row gutter="90">
                    <!-- 内容-左 -->
                    <el-col :span="3" :xs="0"></el-col>
                    <el-col :span="10" :xs="0" class="nr-img-box jccaic">
                        <p class="left-to-right-1 ">
                            <img class="nr-img ele-an-0" src="../../assets/login_img.png" alt="login-icon">
                        </p>
                    </el-col>
                    <!-- 内容-右 -->
                    <el-col :span="9" class="nr-fox">
                        <div class="fo-box">
                            <el-form size="large" @keyup.enter="ok">
                                <el-form-item class="right-to-left-0">
                                    <h2 class="fo-title">账号登录</h2>
                                </el-form-item>
                                <el-form-item class="right-to-left-1">
                                    <el-input
                                        type="text" v-model="state.model.key" placeholder="请输入账号"
                                        prefix-icon="el-icon-User" clearable autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item class="right-to-left-2">
                                    <el-input
                                        type="password" v-model="state.model.password" placeholder="请输入密码" show-password
                                        prefix-icon="el-icon-Lock" clearable autocomplete="off"></el-input>
                                </el-form-item>
                                <div class="reme-box right-to-left-3">
                                    <el-checkbox class="reme-btn" v-model="state.model.remember" label="下次免登录" size="large"></el-checkbox>
                                    <span class="remark-text">忘记密码？</span>
                                </div>
                                <el-form-item class="right-to-left-4">
                                    <el-button type="primary" class="submit-button" color="#337be2" :loading="state.isLoading" @click="ok">登录</el-button>
                                </el-form-item>
                            </el-form>
                            <div class="agree">登录即视为同意<span class="link">《用户隐私协议》</span></div>
                        </div>
                    </el-col>
                    <el-col :span="2" :xs="0"></el-col>
                </el-row>
                <!-- 版权部分 -->
                <!-- <div class="copyright-box left-to-right-4">
                    Copyright ©2024 xxx-xxx 后台管理 | xx 市 xx 网络科技有限公司 - 提供技术支持
                </div> -->
            </div>
        </div>

        <!-- 滑块验证码弹窗 -->
        <os-captcha-model></os-captcha-model>

    </div>
</template>

<script setup name="login">
import OsCaptchaModel from "@/sa-frame/aj-captcha/os-captcha-model";
import {onMounted, reactive} from "vue";
import router from "@/router";
import {useSettingStore} from "@/store/setting";
import {useUserStore} from "@/store/user";
import initAdmin from "@/init/init-admin";
import md5 from "md5";
import logo from '@/assets/logo3.png'
import ylLogo from '@/assets/yl_logo_title.png'

const settingStore = useSettingStore();
const platform = import.meta.env.VITE_PLATFORM;

// 字段
const state = reactive({
    isLoading: false,  // 是否正在请求中
    model: {  // 表单字段 
        key: '',
        password: '',
        remember: false
    }
})

onMounted(() => {
    let tempToken = sa.p('temp-token') || router.currentRoute.value.query['temp-token'];
    if(tempToken) {
        fastLogin(tempToken);
    }
})

// 提交登录 
const ok = () => {
    // 参数校验  
    const model = state.model;
    if(sa.isNull(model.key) || sa.isNull(model.password)) {
        return sa.msg('请输入完整信息');
    }

    let params = {
        "username": model.key,
        "password": md5(model.password).toUpperCase(),
    }
    sa.ajax('/api/fund/login', params, function (res) {
        state.isLoading = false;
        loginSuccess(res,params);
    }, {
        msg: '登录中...',
        msgType: 'layer',
        complete: function (){
            state.isLoading = false;
        }
    });

    // 提交登录 
    // sa.showCaptchaModel(res => {
    //     state.isLoading = true;
    //     model.cttToken = res.cttToken;
    //     sa.ajax('/AccAdmin/doLogin', model, function (res) {
    //         state.isLoading = false;
    //         loginSuccessbak(res);
    //     }, {
    //         msg: '登录中...',
    //         msgType: 'layer',
    //         complete: function (){
    //             state.isLoading = false;
    //         }
    //     });
    // })
}

// 快速登录 
const fastLogin = function (tempToken) {
    sa.ajax('/AccAdmin/doLoginByTempToken', { tempToken: tempToken }, function (res) {
        loginSuccess(res);
    }, {msg: '启动快速登录...', msgType: 'layer'});
}
// 登录成功后，写入数据，跳转界面
const loginSuccess = function (res,params) {
    let loginInfo = res.data;
    useUserStore().setUserInfo2(loginInfo)
    // 记入登录账号
    if(params && params.username) {
        useUserStore().setLoginInfo(params)
    }
    if(loginInfo.RoleId != 0) {
        // 打个招呼, 并跳转 
        sa.ok2('欢迎你：' + loginInfo.dr_name);
    }
    setTimeout(function (){
        const redirect = router.currentRoute.value.query.redirect || '/';
        initAdmin(decodeURIComponent(redirect))
    }, 800)
    return
    // 写入token
    if(res.data.tokenInfo) {
        if(state.model.remember) {
            sessionStorage.removeItem('satoken');
            localStorage.setItem('satoken', res.data.tokenInfo.tokenValue);
        } else {
            localStorage.removeItem('satoken');
            sessionStorage.setItem('satoken', res.data.tokenInfo.tokenValue);
        }
    }

    // 打个招呼, 并跳转 
    sa.ok2('欢迎你：' + res.data.admin.name);
    setTimeout(function (){
        const redirect = router.currentRoute.value.query.redirect || '/';
        initAdmin(decodeURIComponent(redirect))
    }, 800)
}

// 登录成功后，写入数据，跳转界面
const loginSuccessbak = function (res) {
    // 写入token
    if(res.data.tokenInfo) {
        if(state.model.remember) {
            sessionStorage.removeItem('satoken');
            localStorage.setItem('satoken', res.data.tokenInfo.tokenValue);
        } else {
            localStorage.removeItem('satoken');
            sessionStorage.setItem('satoken', res.data.tokenInfo.tokenValue);
        }
    }

    // 打个招呼, 并跳转 
    sa.ok2('欢迎你：' + res.data.admin.name);
    setTimeout(function (){
        const redirect = router.currentRoute.value.query.redirect || '/';
        initAdmin(decodeURIComponent(redirect))
    }, 800)
}

// 刷新页面
const refresh = () => {
    location.reload();
}

</script>

<style scoped lang="scss">

// 背景盒子
.bg-box{ position: fixed; width: 100vw; height: 100vh; z-index: 10; background-color: #FFF;}
//.bg-box{background: linear-gradient(to top, #3f9fff, #2c41b4);}
.login-bg-low{position: fixed; top: 0px; width: 100vw;height: 100vh;object-fit: cover;}

// logo
.logo-box{position: fixed; left: 5%; top: 7%;}
.logo-box img{width: auto; height: 50px; vertical-align: middle; }
.logo-box span{vertical-align: sub; margin-left: 20px; font-size: 30px; font-weight: 700; color: #333}

// 右上角按钮
.refresh-btn-box{
    position: fixed;
    top: 20px;
    right: 40px;
}

// ---------- 内容 ------------
.con-box{
    width: 100%; height: 100vh; display: flex; align-items: center; text-align: center;
    position: fixed;
    z-index: 20;
}
.con-box2{flex: 1;}

// 左边icon
.nr-img-box{display: flex;
align-items:last baseline;justify-content: center;}
.nr-img-box .title{
    text-align: center;
    color: #0088FF;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 40px;
}
.nr-img{width: 100%;}
.sub-title{margin-top: 40px; font-size: 28px; font-weight: 400;}
.nr-info{margin-top: 20px; font-size: 16px;}

// 右边登录盒子
.nr-fox{text-align: left;}
.fo-box{
    box-sizing: border-box;
    width: 400px;
    padding: 60px 70px 100px 70px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px #D6E7FD;
    border-radius: 16px 16px 16px 16px;
    margin-left: 60px;
}
.agree{
    text-align: center;
    font-size: 13px;
    color: #C6C6C6;
    position: relative;
    top: -5px;
    .link{
        color: #0088FF;
    }
}
@media (max-width: 768px) {
    .fo-box{width: 94vw; margin-left: 3vw; padding: 30px;}
}
.fo-box {
    :deep(.el-input__wrapper) {
        border-radius: 1px !important;
        border: none;
        background-color: #F3F4F9;
        box-shadow: none;
        border-radius: 5px!important;
    }
}
.fo-title{font-size: 24px;text-align: center;margin: 0 auto 20px;}
.submit-button{
    width: 100%;
    letter-spacing: 2px;
    margin-top: 20px;
}
.reme-box{
    width: 100%;
    padding-bottom: 20px;
    margin-top: -10px;
}
//.reme-btn{display: inline-block;}
.remark-text{
    color: #B0B2B7;
    float: right;
    line-height: 40px;
    cursor: pointer;
    &:hover{
        color: #0088FF;
    }
}

// 版权
.copyright-box{
    position: fixed;
    bottom: 30px;
    color: #ddd;
    width: 90vw;
    margin-left: 5vw;
}

// 动画
@for $i from 0 through 4 {
    .left-to-right-#{$i} {
        opacity: 0;
        animation-name: left-to-right;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i / 10) + s;
    }
}

@for $i from 0 through 4 {
    .right-to-left-#{$i} {
        opacity: 0;
        animation-name: right-to-left;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/10) + s;
    }
}


</style>
